<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页</title>
<style type="text/css">
#container {
	width: 1000px;
	border: solid 2px green;
	margin: 50px auto;
	padding: 30px;
}
input {
	margin: 10px 0;
}
</style>
</head>
<body>
	<div id="container">
		<form action="${ bp }/user?method=regist" method="post" enctype="multipart/form-data">
			昵称： 
			<input type="text" name="nickname" value="${ user.nickname }">
			<br> 
			用户名： 
			<input type="text" name="username" value="${ user.username }"> 
			<span id="username_message"></span>
			<br> 
			密码： 
			<input type="password" name="password" value="${ user.password }">
			<br>
			区划：
			<select id="province">
				<option>-请选择-</option>
			</select>
			<select id="city">
				<option>-请选择-</option>
			</select>
			<select id="county" name="region_id">
				<option>-请选择-</option>
			</select>
			<br>
			头像：
			<input type="file" name="photo"> 
			<br>
			<input type="submit" value="注册"> 
			<br> 
			<a href="${ bp }/user/login.jsp">已有账号？立即登录！</a> 
			<br> 
			<span style="color: red">${ message }</span> 
			<br>
		</form>
	</div>

	<script src="${ bp }/static/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {

			// 检查用户名是否存在
			$('[name="username"]').change(function() {
				
				let username = $(this).val();
				
				$.ajax({

					//请求的url地址
					url : '${ bp }/user?method=checkUsername',
					//请求的类型，get/post/update/delete/put
					type : 'post',
					//要发送给服务器的数据，使用json格式
					data : {
						"username" : username
					},
					//是否开启异步请求，默认开启true
					async : true,
					//期望返回的数据格式
					dataType : 'json',
					//请求成功的处理函数
					success : function(result) {
						console.log(result.message);
						if (result.message == "ok") {
							$('#username_message').text("用户名可以使用！");
							$('#username_message').css("color","green")
						} else {
							$('#username_message').text("用户名已存在！");
							$('#username_message').css("color","red")
						}
					},
					//请求失败的处理函数
					error : function() {
						console.log('接口请求失败！')
					}

				});
				
			})
			
			
			// 获取所有省级区划
			$.ajax({
				url : '${ bp }/region?method=province',
				type : 'post',
				dataType : 'json',
				success : function(result) {
					console.log(result.data);
					result.data.forEach(p => {
						$('#province').append($('<option value="'+ p.id +'">'+ p.name +'</option>'));
					});
				},
				error : function() {
					console.log('接口请求失败！')
				}
			});
			
			// 获取对应的市级区划
			$('#province').change(function() {
				let parentId = $(this).val();
				$.ajax({
					url : '${ bp }/region?method=child',
					type : 'post',
					data : {
						"parent_id" : parentId
					},
					dataType : 'json',
					success : function(result) {
						console.log(result.data);
						result.data.forEach(p => {
							$('#city').append($('<option value="'+ p.id +'">'+ p.name +'</option>'));
						});
					},
					error : function() {
						console.log('接口请求失败！')
					}
				});
			})
			
			
			// 获取对应的县级区划
			$('#city').change(function() {
				let parentId = $(this).val();
				$.ajax({
					url : '${ bp }/region?method=child',
					type : 'post',
					data : {
						"parent_id" : parentId
					},
					dataType : 'json',
					success : function(result) {
						console.log(result.data);
						result.data.forEach(p => {
							$('#county').append($('<option value="'+ p.id +'">'+ p.name +'</option>'));
						});
					},
					error : function() {
						console.log('接口请求失败！')
					}
				});
			})
			
		})
	</script>
</body>
</html>